// jquery事件绑定必须放置在函数中（1.jQuery页面初始加载页面事件2.js函数中）
// $ 等同与Jquery
$(function() {
	$(".checkUser").click(function() {
		var $inputname = $("#name");
		var $inputphone = $("#phone");
		$inputname.each(function(i) {
			if ($($inputname[i]).val() == "") {
				alert("输入为空");
			}
		});
	});
	init();

	//$(".last tr").odd().css("background-color","antiquewhite");
	$("[name = 'del']").click(function() {
		console.log($(this).parent())
		if (confirm("确认删除？")) {
			$(this).parent().parent().remove();
		}

	});


	//jQuery鼠标移进（mouseover  mouseenter）移出事件（mouseout mouseleave）

	$("#table tr").mouseover(function() {
		//css样式添加的是行内样式   addclass添加class样式
		// $(this).css("background-color","lightblue");
		//$(this).addClass("bg");
	});
	$("#table tr").mouseout(function() {
		// $(this).css("background-color","transparent");
		//$(this).removeClass("bg");
	});

	$("#select").click(function() {
		var $search = $("#check").val();
		var $markNo = $(".markNo");
		// console.log($markNo);
		$markNo.each(function(i) {
			var mNo = $($markNo[i]).text();
			if($search == mNo) {
				var $td = $("#table tr").eq(i+1);
				$("#table").html($str); 
				$("#table").append($td);
				return false;
			}else{
				var $td = $("#table tr").eq(i+1);
				$("#table").html($str);
			}
			if ($search == '') {
				init();
			}
		})
	});


});


function init() {
	//初始加载数据
	//js操作dom元素，jquery也可以
	//ECMAScript
	//js定义数据类型关键字， var是Es5之前定义数据类型关键字，ES6之后用let
	var arrStatus = new Array("已持照", "未持照");

	var jsonTR = {
		"userName": "胡应惨",
		"markno": "bj53473409",
		"status": 0,
		"phone": "13574556682",
		"openDate": "2021-07-07"
	};
	var array = [{
			"userName": "胡应惨1",
			"markno": "bj53473239",
			"status": 0,
			"phone": "13574556682",
			"openDate": "2021-07-07"
		},
		{
			"userName": "胡应惨2",
			"markno": "bj2373409",
			"status": 1,
			"phone": "13574556682",
			"openDate": "2021-07-07"
		},
		{
			"userName": "胡应惨3",
			"markno": "bj53476309",
			"status": 0,
			"phone": "13574556682",
			"openDate": "2021-07-07"
		},
		{
			"userName": "胡应惨4",
			"markno": "bj52373409",
			"status": 0,
			"phone": "13574556682",
			"openDate": "2021-07-07"
		}
	];

	let $tr = `<tr>
				    <td>${jsonTR.userName}</td>
				    <td class="markNo">${jsonTR.markno}</td>
					<td>${arrStatus[jsonTR.status]}</td>
					<td>${jsonTR.phone}</td>
					<td>${jsonTR.openDate}</td>
				  </tr>`;
	//前后端不分离：js面试题，使用js或者jquery动态追加绑定元素用什么方法
	//jQuery：qppend（）；，js：appendChild（）；

	var $ulStr = "";
	$(array).each(function(index) {
		$(".last").empty();
		var arrJson = array[index];
		$ulStr += `<tr>
				    <td>${arrJson.userName}</td>
				    <td class="markNo">${arrJson.markno}</td>
					<td>${arrStatus[arrJson.status]}</td>
					<td>${arrJson.phone}</td>
					<td>${arrJson.openDate}</td>
					<td> 
					<a href="">详情</a>
			        <a href="javascript:void(0);" name="del">删除</a>
					</td>
				  </tr>`;
	});
	//javascript:void(0); a标签禁止刷新

	$(".last").append($str);
	$(".last").append($ulStr);
	$("#table td").each(function() {
		if ($(this).text() == "已持照") {
			$(this).css("color", "red");
		}
	});
	$("#table td").hover(function() {
		$(this).css("border", "1px solid green");
	}, function() {
		$(this).css("border", "1px solid transparent");
	})
}
	var $str = `<tr>
				    <th>姓名</th>
				    <th>中签编码</th>
					<th>持照状态</th>
					<th>手机号码</th>
					<th>开户日期</th>
					<th>操作</th>
				  </tr>`;